<template>
  <div class="workbench">
    <van-nav-bar
      :title="title"
      :fixed="true"
      :border="false"
      left-arrow
      @click-left="goBackHandle"
      @click-right="goSetting"
      :safe-area-inset-top="true"
      style="padding-top: 0px"
    >
      <template #right>
        <van-icon name="setting" size="18" color="#000" />
      </template>
    </van-nav-bar>
    <div class="dataContent">
      <van-pull-refresh
        v-model="refreshing"
        @refresh="onRefresh"
        :disabled="scrollTop > 0"
      >
        <van-tabs
          v-model="active"
          title-active-color="#34cc5f"
          title-inactive-color=""
          color="#34cc5f"
          v-if="role != 0"
          @click="onClick"
        >
          <van-tab
            title="待处理"
            :badge="applyDataLength"
            class="outborder"
            id="List1"
            ref="List1"
          >
            <div class="noData" v-if="applyDataNo">
              <img :src="require('../../assets/noData.png')" alt="" />暂无数据
            </div>
            <!-- <div class="content batch"></div> -->

            <div
              class="content batch"
              v-if="!showCheckbox && applyData.length !== 0"
              @click="clickBatch"
            >
              批量处理
            </div>
            <div class="content batch" v-if="showCheckbox">
              <span @click="checkAll" style="margin-right: 10px">全选</span
              ><span @click="checkOut">取消处理</span>
            </div>
            <!-- 待处理列表 -->
            <div style="flex: 1">
              <van-list
                v-model="loading"
                :finished="finished"
                :finished-text="'没有更多了'"
                @load="onLoad"
                :immediate-check="false"
                class="daichuli"
              >
                <van-cell
                  v-for="(item, index) in applyData"
                  :key="index + 'applyData'"
                >
                  <div class="">
                    <van-checkbox-group v-if="showCheckbox" v-model="result">
                      <van-checkbox
                        shape="square"
                        icon-size="16px"
                        :name="item"
                        ref="checkBoxs"
                        @click="clickCheckbox(index)"
                      ></van-checkbox>
                    </van-checkbox-group>
                    <span class="nameApply"
                      >{{ item.ApplicantName }}的{{ item.ApplicantType }}</span
                    >
                    <span class="applyStatus">{{ item.StatusName }}</span>
                  </div>
                  <div
                    :class="showCheckbox ? 'showCheckboxName' : ''"
                    class="content contentDetail"
                    @click="clickData(item)"
                  >
                    <div style="display: flex">
                      <div style="white-space: nowrap">
                        {{ item.ApplicantType }}事由：
                      </div>
                      <div class="reason">{{ item.Reason }}</div>
                    </div>
                    <div>开始时间：{{ item.StartDate }}</div>
                    <div>结束时间：{{ item.EndDate }}</div>
                  </div>
                </van-cell>
              </van-list>
            </div>
          </van-tab>
          <van-tab title="已处理" class="outborder" id="List2" ref="List2">
            <div class="noData" v-if="processedDataNo">
              <img :src="require('../../assets/noData.png')" alt="" />暂无数据
            </div>
            <!-- <div class="content batch"></div> -->
            <!-- 已处理列表 -->
            <div style="flex: 1">
              <van-list
                v-model="loading"
                :finished="finished"
                :finished-text="'没有更多了'"
                @load="onLoadProcessedData"
                :immediate-check="false"
              >
                <van-cell
                  v-for="(item, index) in processedData"
                  :key="index + 'processedData'"
                >
                  <div class="">
                    <span class="nameApply"
                      >{{ item.ApplicantName }}的{{ item.ApplicantType }}</span
                    >
                    <span class="applyStatus">{{ item.StatusName }}</span>
                  </div>
                  <div class="content contentDetail" @click="clickData(item)">
                    <div style="display: flex">
                      <div style="white-space: nowrap">
                        {{ item.ApplicantType }}事由：
                      </div>
                      <div class="reason">{{ item.Reason }}</div>
                    </div>
                    <div>开始时间：{{ item.StartDate }}</div>
                    <div>结束时间：{{ item.EndDate }}</div>
                  </div>
                </van-cell>
              </van-list>
            </div>
          </van-tab>
        </van-tabs>
        <!--外包提交申请列表-->
        <van-list class="roleout" id="List" ref="List">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="'没有更多了'"
            @load="onLoadOutsourcingData"
            v-if="role == 0"
            class="roleoutlist"
          >
            <div class="noData" v-if="role == 0 && outsourcingDataNo">
              <img :src="require('../../assets/noData.png')" alt="" />暂无数据
            </div>
            <div
              v-for="(item, index) in outsourcingData"
              :key="index + 'outsourcingData'"
              class="outlist"
            >
              <div style="text-align: left; margin-bottom: 5px">
                <span class="nameApply"
                  >{{ item.ApplicantName }}的{{ item.ApplicantType }}</span
                >
                <span class="applyStatus">{{ item.StatusName }}</span>
              </div>
              <div class="outContentDetail" @click="clickData(item)">
                <div style="display: flex; line-height: 22px">
                  <div style="white-space: nowrap">
                    {{ item.ApplicantType }}事由：
                  </div>
                  <div class="reason">{{ item.Reason }}</div>
                </div>
                <div>开始时间：{{ item.StartDate }}</div>
                <div>结束时间：{{ item.EndDate }}</div>
              </div>
            </div>
          </van-list>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- <div
      class="footerDiv1"
      v-if="role !== 0 && showCheckbox && active == 0"
    ></div> -->
    <div class="footer" v-if="role !== 0 && showCheckbox && active == 0">
      <van-button type="default" @click="clickApproval(1)">同意</van-button>
      <van-button type="default" @click="clickApproval(2)">驳回</van-button>
    </div>
    <!-- 底部导航 -->
    <div class="footerDiv" v-if="role == 0"></div>
    <van-tabbar
      class="footer"
      :class="role == 0 ? 'footer0' : ''"
      v-model="activeTabbar"
      @change="onChange"
      v-if="role == 0"
    >
      <van-tabbar-item icon="description">新申请</van-tabbar-item>
      <van-tabbar-item icon="completed">已提交</van-tabbar-item>
    </van-tabbar>
    <van-dialog
      v-model="showDialog"
      title="提示信息"
      :message="dialogMessage"
      show-cancel-button
      @confirm="confirm"
      confirm-button-color="#006dff"
    />
  </div>
</template>
<script>
import { SuccesFN } from '@/DceMessage'
import backMixin from '@/backMixin'
export default {
  name: 'workbench',
  mixins: [backMixin],
  data() {
    return {
      scrollTop: 0,
      refreshing: false,
      title: '已提交', //标题
      active: 0, //tab栏默认选中
      activeTabbar: 1,
      loading: false,
      finished: false,
      showCheckbox: false, //是否显示Checkbox
      checked: false, //Checkbox默认不选
      applyData: [], //待处理
      applyDataNo: false,
      applyDataPage: [],
      processedData: [], //已处理
      processedDataNo: false,
      overTimeArr: [], //加班申请
      askOffArr: [], //请假申请
      outsourcingData: [], //外包提交的申请
      outsourcingDataNo: false,
      applyDataLength: 0, //待处理数量
      role: '', //0，外包，1部门主管，2HR
      statusNameArr: [], //状态数组
      mobile: '', //当前登录的手机号
      id: '', //当前登录的id
      deptId: '', //当前登录的deptId
      searchText: '', //搜索内容
      showDialog: false, //是否显示弹窗
      dialogMessage: '', //弹窗信息内容
      checkArr: [], //选中的id数组
      checkArrAskOff: [], //选中的请假数组id
      // checkArrOverTime: [], //选中的加班数组id
      result: [],
      isRefresh: '', //从请假申请成功获取到的缓存
      isRefreshOver: '', //从加班申请成功获取到的缓存
      page: 1, //请假申请页码
      pageOver: 1, //加班申请页码
      total: '', //总数量
      totalAskOff: '', //请假申请数量
      totalOverTime: '' //加班申请数量
    }
  },
  activated() {
    this.isRefresh = localStorage.getItem('isRefresh')
    this.isRefreshOver = localStorage.getItem('isRefreshOver')
    if (this.isRefresh) {
      this.getAskOffList()
    }
    if (this.isRefreshOver) {
      this.getAskOffList()
    }
  },
  created() {
    //从缓存中获取权限
    this.role = JSON.parse(
      window.localStorage.getItem('attendance-records')
    ).role
    this.mobile = JSON.parse(
      window.localStorage.getItem('attendance-records')
    ).mobile //从缓存中获取当前登录的手机号
    this.id = JSON.parse(window.localStorage.getItem('attendance-records')).id //从缓存中获取当前登录的id
    this.deptId = JSON.parse(
      window.localStorage.getItem('attendance-records')
    ).deptId
    this.statusNameArr = JSON.parse(
      localStorage.getItem('attendance-records_status')
    ) //从缓存中获取状态
    console.log(this.statusNameArr)
    // 判断标题名称
    if (this.role == 0) {
      // 如果是外包权限
      this.title = '已提交'
    } else {
      // 如果是部门负责人或hr
      this.title = '审批'
    }
    this.active = 0
    this.showCheckbox = false
    this.getAskOffList()
  },
  mounted() {
    this.$nextTick(() => {
      let _this = this
      if (this.role == 0) {
        document
          .querySelector('#List')
          .addEventListener('touchmove', _this.tableMove)
      } else {
        document
          .querySelector('#List1')
          .addEventListener('touchmove', _this.tableMove)
        document
          .querySelector('#List2')
          .addEventListener('touchmove', _this.tableMove)
      }
    })
  },
  methods: {
    onRefresh() {
      // this.applyData = []

      if (this.role == 0) {
        this.$refs.List.$el.scrollTop = 0
      } else {
        this.$refs.List1.$el.scrollTop = 0
        this.$refs.List2.$el.scrollTop = 0
      }
      this.scrollTop = 0
      this.loading = false
      this.finished = false
      this.applyDataPage = []
      // this.processedData = []
      // this.applyDataLength = 0
      this.getAskOffList()
      this.showCheckbox = false
    },
    // 点击复选框
    clickCheckbox(val) {
      let aaa = this.applyData[val].Id
      if (this.$refs.checkBoxs[val].checked) {
        // if (this.applyData[val].ApplicantType == '请假') {
        this.checkArrAskOff.push(aaa)
        // } else if (this.applyData[val].ApplicantType == '加班') {
        //   this.checkArrOverTime.push(aaa)
        // }
      } else {
        // if (this.applyData[val].ApplicantType == '请假') {
        this.checkArrAskOff.shift(aaa)
        // } else if (this.applyData[val].ApplicantType == '加班') {
        //   this.checkArrOverTime.shift(aaa)
        // }
      }
    },
    // 点击同意或驳回按钮
    clickApproval(val) {
      this.showDialog = true
      if (val == 1) {
        this.dialogMessage = '确定要同意吗？'
      } else if (val == 2) {
        this.dialogMessage = '确定要驳回吗？'
      }
    },
    // 点击弹窗的确定按钮
    confirm() {
      if (this.dialogMessage == '确定要同意吗？') {
        if (this.checkArrAskOff.length !== 0) {
          console.log(this.checkArrAskOff.toString())
          this.$axios({
            url: '/attendance-api/application-approve-batch',
            method: 'POST',
            data: {
              applicationIdList: this.checkArrAskOff.toString(),
              approverId: this.id,
              status: 6
            }
          }).then(res => {
            console.log(res)
            // 提交数据到成员管理页面
            if (res) {
              SuccesFN(res.data.Message)
              this.showCheckbox = false
              this.checkArrAskOff = []
              // this.getOverTimeList()
              this.onRefresh()
            }
          })
        }
        // if (this.checkArrOverTime.length !== 0) {
        //   console.log(this.checkArrOverTime)
        //   this.$axios({
        //     url: '/attendance-api/overtime-approve-batch',
        //     method: 'POST',
        //     data: {
        //       overtimeIdList: this.checkArrOverTime
        //         .toString()
        //         .replace(/,/g, ';'),
        //       approverId: this.id,
        //       status: 6
        //     }
        //   }).then(res => {
        //     console.log(res)
        //     // 提交数据到成员管理页面
        //     if (res) {
        //       SuccesFN(res.data.Message)
        //       this.showCheckbox = false
        //       // this.getOverTimeList()
        //       this.getAskOffList()
        //     }
        //   })
        // }
      } else if (this.dialogMessage == '确定要驳回吗？') {
        console.log('点击驳回按钮')
        if (this.checkArrAskOff.length !== 0) {
          console.log(this.checkArrAskOff.toString())
          this.$axios({
            url: '/attendance-api/application-approve-batch',
            method: 'POST',
            data: {
              applicationIdList: this.checkArrAskOff.toString(),
              approverId: this.id,
              status: 4
            }
          }).then(res => {
            console.log(res)
            // 提交数据到成员管理页面
            if (res) {
              SuccesFN(res.data.Message)
              this.showCheckbox = false
              this.checkArrAskOff = []
              // this.getOverTimeList()
              this.onRefresh()
            }
          })
        }
        // if (this.checkArrOverTime.length !== 0) {
        //   console.log(this.checkArrOverTime)
        //   this.$axios({
        //     url: '/attendance-api/overtime-approve-batch',
        //     method: 'POST',
        //     data: {
        //       overtimeIdList: this.checkArrOverTime
        //         .toString()
        //         .replace(/,/g, ';'),
        //       approverId: this.id,
        //       status: 4
        //     }
        //   }).then(res => {
        //     console.log(res)
        //     // 提交数据到成员管理页面
        //     if (res) {
        //       SuccesFN(res.data.Message)
        //       this.showCheckbox = false
        //       // this.getOverTimeList()
        //       this.getAskOffList()
        //     }
        //   })
        // }
      }
    },
    // 获取加班申请未处理类列表
    // async getOverTimeList() {
    //   await this.$axios({
    //     url: '/attendance-api/overtime-query-list',
    //     method: 'get',
    //     params: {
    //       pageSize: 0,
    //       page: this.page,
    //       status: '0'
    //     }
    //   }).then(res => {
    //     console.log('加班列表====', res)
    //     // res.data.Object.List.forEach(item=>{
    //     // this.overTimeArr.push(item)
    //     // })
    //     if (res) {
    //       this.overTimeArr = res.data.Object.List
    //       // 给数组的对象中添加ApplicantType元素，用来区分加班、请假
    //       this.overTimeArr.forEach((value, index) => {
    //         value['ApplicantType'] = '加班'
    //         for (var i = 0; i < this.statusNameArr.length; i++) {
    //           if (value.Status == this.statusNameArr[i].Id) {
    //             value['StatusName'] = this.statusNameArr[i].Type
    //           }
    //         }
    //       })
    //       this.getAskOffList()
    //     }
    //     //   if (this.overTimeArr.length === 0) {
    //     //     // 判断获取数据条数若等于0
    //     //     this.overTimeArr = [] // 清空数组
    //     //     this.finished = true // 停止加载
    //     //   }
    //     //   // 若数据条数不等于0
    //     //   this.total = this.overTimeArr.length // 给数据条数赋值
    //     //   this.list.push(...this.overTimeArr) // 将数据放入list中
    //     //   this.loading = false // 加载状态结束
    //     //   // 如果list长度大于等于总数据条数,数据全部加载完成
    //     //   if (this.list.length >= res.data.Object.total) {
    //     //     this.finished = true // 结束加载状态
    //     //   }
    //     console.log(this.overTimeArr)
    //     if (this.overTimeArr && this.isRefreshOver) {
    //       localStorage.removeItem('isRefreshOver')
    //     }
    //   })
    // },
    // 获取申请列表，合并加班申请
    async getAskOffList() {
      // 获取请假申请类列表
      let params = {
        pageSize: 0,
        page: this.page,
        status: '',
        applicationType: '0'
      }
      let tempDept = window.localStorage.getItem('attendance-records')
      let tempDeptId = JSON.parse(tempDept).deptId
      //1615586587184205824为超级管理员的部门id  飞创公司
      if (tempDeptId != '1615586587184205824') {
        params.deptId = tempDeptId
      }
      await this.$axios({
        url: '/attendance-api/application-query-list',
        method: 'get',
        params: params
      })
        .then(res => {
          console.log('申请列表====', res)
          // res.data.Object.List.forEach(item=>{
          // this.askOffArr.push(item)
          // })
          setTimeout(() => {
            this.refreshing = false
          }, 300)
          if (res) {
            this.askOffArr = res.data.Object.List
            console.log(this.askOffArr)
            // 给数组的对象中添加ApplicantType元素，用来区分加班、请假
            this.askOffArr.forEach((value, index) => {
              if (value['ApplicationType'] === 1) {
                value['ApplicantType'] = '加班'
              } else if (value['ApplicationType'] === 2) {
                value['ApplicantType'] = '请假'
              }

              for (var i = 0; i < this.statusNameArr.length; i++) {
                if (value.Status == this.statusNameArr[i].Id) {
                  value['StatusName'] = this.statusNameArr[i].Type
                }
              }
            })
          }

          console.log(this.askOffArr)
          if (this.askOffArr && this.isRefresh) {
            localStorage.removeItem('isRefresh')
          }
        })
        .catch(e => {
          setTimeout(() => {
            this.refreshing = false
          }, 300)
          this.askOffArr = []
        })

      // 合并加班申请和请假申请
      let arr = this.askOffArr
      console.log(arr)
      arr.filter(item => {
        let StartDate = new Date(item.StartDate)
        let EndDate = new Date(item.EndDate)
        let sm = StartDate.getMonth() + 1
        sm < 10 ? (sm = '0' + sm) : sm
        let em = EndDate.getMonth() + 1
        em < 10 ? (em = '0' + em) : em
        let sd = StartDate.getDate()
        sd < 10 ? (sd = '0' + sd) : sd
        let ed = EndDate.getDate()
        ed < 10 ? (ed = '0' + ed) : ed
        let sh = StartDate.getHours()
        sh < 10 ? (sh = '0' + sh) : sh
        let eh = EndDate.getHours()
        eh < 10 ? (eh = '0' + eh) : eh
        let sMinute = StartDate.getMinutes()
        sMinute < 10 ? (sMinute = '0' + sMinute) : sMinute
        let eMinute = EndDate.getMinutes()
        eMinute < 10 ? (eMinute = '0' + eMinute) : eMinute
        if (item.ApplicantType == '请假') {
          console.log(item.StartDate)
          StartDate = `${StartDate.getFullYear()}-${sm}-${sd}`
          EndDate = `${EndDate.getFullYear()}-${em}-${ed}`
          if (sh == '08' && eh == '12') {
            item.StartDate = StartDate + ' ' + '上午'
            item.EndDate = EndDate + ' ' + '上午'
          } else if ((sh == '13' && eh == '17') || (sh == '13' && eh == '18')) {
            item.StartDate = StartDate + ' ' + '下午'
            item.EndDate = EndDate + ' ' + '下午'
          } else if ((sh == '08' && eh == '17') || (sh == '08' && eh == '18')) {
            item.StartDate = StartDate + ' ' + '上午'
            item.EndDate = EndDate + ' ' + '下午'
          }
        } else {
          item.StartDate = `${StartDate.getFullYear()}-${sm}-${sd} ${sh}:${sMinute}`
          item.EndDate = `${EndDate.getFullYear()}-${em}-${ed} ${eh}:${eMinute}`
        }
      })
      if (this.role == 0) {
        // 如果是外包 0
        // 使用filter过滤出是当前用户的申请，id==ApplicantId
        let applyData = arr.filter(item => this.id == item.ApplicantId)
        // this.applyDataTotal = applyData.length

        if (applyData.length == 0) {
          this.outsourcingDataNo = true
          this.outsourcingData = []
          this.applyDataPage = []
          this.finished = false
        } else {
          this.applyDataPage = this.pagearr(applyData)
          this.outsourcingData = this.applyDataPage.shift()
          this.outsourcingDataNo = false
          if (this.outsourcingData.length == applyData.length) {
            this.finished = true
          }
        }
      } else if (this.role == 1) {
        // 如果是部门负责人
        // 使用filter过滤出该部门下员工的申请  DeptId
        let deptArr = arr.filter(item => this.deptId == item.DeptId)
        /********待处理*******/
        if (this.active === 0) {
          let applyData = deptArr.filter(item => item.Status == 1)
          // alert(applyData)
          this.applyDataTotal = applyData.length

          if (applyData.length == 0) {
            this.applyDataNo = true
            this.applyData = []
            this.applyDataPage = []
            this.finished = false
          } else {
            this.applyDataPage = this.pagearr(applyData)
            this.applyData = this.applyDataPage.shift()
            this.applyDataNo = false
            if (this.applyData.length == applyData.length) {
              this.finished = true
            }
          }
        } else {
          /********已处理*******/
          let processedData = deptArr.filter(
            item => item.Status !== 0 && item.Status !== 1
          )
          // this.processedDataTotal = processedData.length

          if (processedData.length == 0) {
            this.processedDataNo = true
            this.processedData = []
            this.applyDataPage = []
            this.finished = false
          } else {
            this.applyDataPage = this.pagearr(processedData)
            this.processedData = this.applyDataPage.shift()
            this.processedDataNo = false
            if (this.processedData.length == processedData.length) {
              this.finished = true
            }
          }
        }
      } else if (this.role == 2) {
        // 如果是hr
        // 使用filter过滤出待处理，已处理
        /********待处理*******/
        if (this.active === 0) {
          let applyData = arr.filter(item => item.Status == 1)
          this.applyDataTotal = applyData.length

          if (applyData.length == 0) {
            this.applyDataNo = true
            this.applyData = []
            this.applyDataPage = []
            this.finished = false
          } else {
            this.applyDataPage = this.pagearr(applyData)
            console.log('待处理数据》》》》》》》', this.applyDataPage)
            this.applyData = this.applyDataPage.shift()
            this.applyDataNo = false
            if (this.applyData.length == applyData.length) {
              this.finished = true
            }
          }
        } else {
          /********已处理*******/
          let processedData = arr.filter(
            item => item.Status !== 0 && item.Status !== 1
          )
          // this.processedDataTotal = processedData.length

          if (processedData.length == 0) {
            this.processedDataNo = true
            this.processedData = []
            this.applyDataPage = []
            this.finished = false
          } else {
            this.applyDataPage = this.pagearr(processedData)
            this.processedData = this.applyDataPage.shift()
            this.processedDataNo = false
            if (this.processedData.length == processedData.length) {
              this.finished = true
            }
          }
        }
      }
      // 获取未处理数量
      console.log(this.applyData)
      this.applyDataLength = this.applyDataTotal
    },
    //移动监听
    tableMove() {
      if (this.role == 0) {
        this.scrollTop = this.$refs.List.$el.scrollTop
      } else {
        if (this.active == 0) {
          this.scrollTop = this.$refs.List1.$el.scrollTop
        } else {
          this.scrollTop = this.$refs.List2.$el.scrollTop
        }
      }

      console.log('ddddd', this.scrollTop)
    },
    //设置一页几条数据
    pagearr(arr, num = 10) {
      let arrList = []
      for (var i = 0; i < arr.length; i += num) {
        arrList.push(arr.slice(i, Math.min(i + num, arr.length)))
      }
      console.log('rrrrrr>>>>>>>>>>>>>', arrList)
      return arrList
    },
    // 点击tab栏切换时调接口
    onClick() {
      this.$refs.List1.$el.scrollTop = 0
      this.$refs.List2.$el.scrollTop = 0
      this.scrollTop = 0
      this.applyData = []
      this.loading = false
      this.finished = false
      this.applyDataPage = []
      this.processedData = []
      // this.applyDataLength = 0
      this.getAskOffList()
      this.showCheckbox = false
    },
    //待处理列表加载
    onLoad() {
      if (this.applyData.length == 0) {
        this.loading = false
        this.finished = false
        return
      }
      if (this.applyDataPage.length == 0) {
        this.loading = false
        this.finished = true
        return
      }
      // 异步更新数据
      setTimeout(() => {
        this.applyData.push(...this.applyDataPage.shift())
        this.loading = false
      }, 1500)
    },
    //已处理列表加载
    onLoadProcessedData() {
      if (this.processedData.length == 0) {
        this.loading = false
        this.finished = false
        return
      }
      if (this.applyDataPage.length == 0) {
        this.loading = false
        this.finished = true
        return
      }
      // 异步更新数据
      setTimeout(() => {
        this.processedData.push(...this.applyDataPage.shift())
        this.loading = false
      }, 1000)
    },
    //外包列表加载
    onLoadOutsourcingData() {
      if (this.outsourcingData.length == 0) {
        this.loading = false
        this.finished = false
        return
      }
      if (this.applyDataPage.length == 0) {
        this.loading = false
        this.finished = true
        return
      }
      // 异步更新数据
      setTimeout(() => {
        this.outsourcingData.push(...this.applyDataPage.shift())
        this.loading = false
      }, 1000)
    },
    // 点击设置按钮
    goSetting() {
      console.log('点击设置按钮')
      this.$router.push({
        name: 'settingPage'
      })
    },
    // 点击搜索图标
    clickSearch() {
      console.log('点击搜索图标')
    },
    onChange(index) {
      if (index == 0) {
        this.activeTabbar = 1
        this.$router.push('/outsourcingNewApply')
      } else if (index == 1) {
        this.activeTabbar = 1
        this.getOverTimeList()
        this.getAskOffList()
      }
    },
    // 点击批量处理
    clickBatch() {
      // 跳转到批量处理页面
      console.log('点击批量处理')
      this.showCheckbox = true
      this.checkArrAskOff = []
    },
    // 点击全选
    checkAll() {
      this.checked = !this.checked
      for (var i = 0; i < this.applyData.length; i++) {
        if (this.checked) {
          this.$refs.checkBoxs[i].toggle(true)
        } else {
          this.$refs.checkBoxs[i].toggle(false)
        }
      }
    },
    // 点击取消
    checkOut() {
      this.applyData.forEach((value, index) => {
        this.$refs.checkBoxs[index].checked = false
      })
      this.showCheckbox = false
    },
    // 点击数据跳转到详情页面
    clickData(item) {
      console.log(item)
      this.$router.push({
        name: 'workbenchDetail',
        params: {
          params: { ...item }
        }
      })
    },
    // 点击返回按钮
    goBackHandle() {
      // if (this.role == 1 || this.role == 2) {
      this.finishInApp()
      // } else if (this.role == 0) {
      //   this.$router.go(-1)
      // } else {
      // }
    },
    // 判断当前系统是否为iOS系统
    IsIOS() {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        return true
      } else {
        return false
      }
    },
    // 判断当前系统是否安卓系统
    IsAndroid() {
      if (/(Android|Adr)/i.test(navigator.userAgent)) {
        return true
      } else {
        return false
      }
    },
    async finishInApp() {
      this.$router.push({ name: 'login' })
      // // alert('审批物理退出')
      // if (this.IsIOS()) {
      //   window.webkit.messageHandlers.LinkToDfitcNativeFunction.postMessage(
      //     '9918'
      //   )
      // } else if (this.IsAndroid()) {
      //   window.smartinfo.LinkToDfitcNativeFunction('9918')
      // }
    }
  }
}
</script>
<style lang="less" scoped>
.workbench:deep {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  .van-nav-bar {
    z-index: 999;
  }
  .van-pull-refresh {
    overflow: unset;
    height: 100%;
    padding-bottom: 20px;
  }
  .van-tabs,
  .van-tabs__content {
    height: 100%;
  }
  .outborder {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    position: relative;
    // justify-content: center;
    padding-bottom: 20px;
  }
  .van-list {
    width: 100%;
    // height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
  }
  .daichuli {
    padding-bottom: 20px;
  }
  .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
  .van-nav-bar__content {
    .van-nav-bar__title {
      font-size: 18px;
    }
  }
  .van-tabs__wrap {
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .noData {
    width: 343px;
    font-size: 13px;
    color: #999999;
    background: #fff;
    border-radius: 9px;
    // margin: 20px auto;
    // padding-top: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    img {
      width: 254px;
      height: 290px;
      display: block;
      margin: 0 auto;
    }
  }
  // .box {
  //   padding: 10px 16px;
  //   background-color: #fff;
  //   position: sticky;
  //   top: 86px;
  //   margin-bottom: 10px;
  //   z-index: 998;
  //   .van-field {
  //     background-color: #fff;
  //     padding: 0 10px;
  //     border: 1px solid #999;
  //     border-radius: 5px;
  //     text-align: center;
  //   }
  //   .searchBtn {
  //     margin: 0;
  //     padding: 0;
  //     border: 0;
  //   }
  // }
  .dataContent {
    margin-top: 46px;
    flex: 1;
    overflow: hidden;
    .nameApply {
      font-weight: 600;
      padding-right: 10px;
      line-height: 20px;
    }
    .applyStatus {
      font-size: 12px;
      padding: 2px;
      background-color: #f5f5f5;
      border: 1px solid #999;
      border-radius: 5px;
    }
    .content {
      // padding: 12px 16px 0;
      text-align: left;
    }
    .batch {
      padding: 10px 16px;
      position: sticky;
      top: 0px;
      margin-top: 0px;
      // border-bottom: 1px solid #f5f5f5;
      background-color: #fff;
      z-index: 999;
    }
    .contentDetail {
      color: #999;

      .reason {
        display: inline-block;
        width: 100%;
        word-break: break-all;
        word-wrap: break-word;
        white-space: normal;
      }
      // .reason {
      //   width: 100%;
      //   white-space: nowrap;
      //   display: block;
      //   overflow: hidden;
      //   text-overflow: ellipsis;
      // }
    }
    .roleoutlist {
      width: 100%;
      display: flex;
      flex-direction: column;
      // align-items: flex-start;
      padding-bottom: 0px;
    }
    .outlist {
      width: 100%;

      padding: 5px 16px;
      box-sizing: border-box;
    }
    .roleout {
      height: 100%;
      overflow: auto;
      padding-bottom: 0px;
      box-sizing: border-box;
    }
  }

  .outContentDetail {
    border-bottom: 1px solid #ebedf0;
    padding-top: 5px;
    color: #999;
    padding-bottom: 10px;
    text-align: left;
    .reason {
      display: inline-block;
      width: 100%;
      word-break: break-all;
      word-wrap: break-word;
      white-space: normal;
    }
  }
  .van-checkbox-group {
    display: inline-block;
    margin-right: 10px;
  }
  .showCheckboxName {
    margin-left: 28px;
  }
  // .footerDiv1 {
  //   height: 24px;
  // }
  .footerDiv {
    // height: 40px;
  }
  .vanTabbar {
    position: relative !important;
    bottom: 0;
  }
  .footer0 {
    height: 50px !important;
  }
  .footer {
    height: 64px;
    position: relative;
    bottom: 0;
    display: flex;
    width: 100%;
    background-color: #fff;
    .van-button {
      flex: 1;
      margin: 10px 16px;
      background: #e3efff;
      color: #006dff;
      font-size: 16px;
      border-radius: 10px;
      border: 0;
    }
    .van-button:last-child {
      margin-left: 0;
      background-color: #006dff;
      color: #fff;
    }
  }
}
</style>
